<template>
  <div class="done">
    <head-top head-title="接单订单" go-back="true"></head-top>
    <div class="done-main">
      <ul>
        <li v-for="(d,index) in dList" :key="index">
          <div class="order-number">
            <span>订单号：{{d.order_id}}</span>
            <span>已完成</span>
          </div>
          <div class="order-content" @click="$router.push('/my/OrderDetails/'+d.order_id)">
            <h2>{{d.title}}</h2>
            <p>截止时间：{{d.end_at}}</p>
            <p>查验地址：{{d.address}}</p>
          </div>
        </li>
        <li v-if="flag&&dList.length === 0" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
        <li v-if="noDataShow" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../../../components/header/Header'
  import { doneList } from '../../../api/MyOrder'

  export default {
    name: 'Done',
    data () {
      return {
        types: 'person',
        t_status: 1,
        dList: [],
        flag: false, // 标识：用于判断没有数据的显示
        noDataShow: false // 用于code为400的时候显示
      }
    },
    // 设置缓存从哪个页面回来（停留在点击详情页面时的位置）
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'OrderDetails') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._doneList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._doneList()
    },
    methods: {
      _doneList () {
        doneList(this.types, this.t_status).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // reverse：颠倒数组元素的顺序
            this.dList = res.data.reverse()
            this.flag = true
          }
          if (res.code === 400) {
            this.noDataShow = true
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .done {
    padding-top: 50px;
    .done-main {
      ul {
        li {
          border-bottom: 10px solid #f2f2f2;
          padding: 10px;
          .order-number {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #d9d9d9;
            padding: 2px 0 7px 0;
            span:first-child {
              color: #666666;
            }
            span:last-child {
              color: #2585d0;
            }
          }
          .order-content {
            h2 {
              font-weight: normal;
              font-size: 15px;
              padding-top: 10px;
              color: #292929;
            }
            p {
              font-size: 14px;
              padding-top: 10px;
              color: #666666;
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
        .no_data {
          width: 100%;
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
